{% with colors=site_settings.resolved_colors %}
<style>
  :root {
    --brand-primary: {{ colors.primary }};
    --brand-secondary: {{ colors.secondary }};
    --brand-accent: {{ colors.accent }};
    --brand-success: {{ colors.success }};
    --bs-primary: {{ colors.primary }};
    --bs-link-color: {{ colors.primary }};
    --bs-link-hover-color: {{ colors.secondary }};
  }
  .btn-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
  }
  .btn-primary:hover, .btn-primary:focus {
    background-color: var(--brand-secondary) !important;
    border-color: var(--brand-secondary) !important;
  }
  .btn-outline-primary {
    color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
  }
  .btn-outline-primary:hover {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
  }
  .text-primary { color: var(--brand-primary) !important; }
  .bg-primary { background-color: var(--brand-primary) !important; }
  .sidebar-link.active {
    background-color: var(--brand-primary) !important;
  }
  .sidebar-link:hover {
    color: var(--brand-primary) !important;
  }
  .lms-navbar {
    background: linear-gradient(135deg, var(--brand-secondary) 0%, var(--brand-primary) 100%) !important;
  }
  .lms-navbar .btn-nav-signup {
    background: linear-gradient(135deg, var(--brand-accent), {{ colors.accent }}) !important;
    color: var(--brand-secondary) !important;
  }
  .form-check-input:checked {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
  }
  .badge.bg-success, .text-bg-success { background-color: var(--brand-success) !important; }
</style>
{% endwith %}